<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部署页面第二版</title>
    <style type="text/css">
         input{
                padding: 2px;
                border: solid 1px #E5E5E5;
                margin: 5px;
                font: normal 18px/100% Verdana, Tahoma, sans-serif;
            }
            #pkg{
                font: normal 12px/100% Verdana, Tahoma, sans-serif;
            }
    </style>
</head>
<body>
<br/>
<p>安装包信息：</p>
			<div id="animate-clone">
            <form class="form" action="/fsp/submitallserviceinfo/" class="form"  method="get">
				FSP 安装包URL：<input type="text"  id="pkg" name="pkgURL" size="160" value="http://192.168.5.30:8080/view/%E5%B9%B3%E5%8F%B0%E4%BA%A7%E5%93%81%E7%BA%BF/job/build_platform_fsp_sss/lastSuccessfulBuild/artifact/sss-1.2.3.0.tar.gz"><br><br>

                数据库信息：<br/>
                DBIP：<input type="text" name="dbHost" value="192.168.7.105"/><br/>
                DBPort：<input type="text" name="dbPort" value="3306"/><br/>
                DBName：<input type="text" name="dbName" value="fsp_sss"/><br/>
                DBUser：<input type="text" name="dbUser" value="root"/><br/>
                DBPwd：<input type="text" name="dbPwd" value="123456"/><br/><br/>
                部署信息：<br>
                <div class="toclone">
                    机器IP：<input type="text" name="ip" id="aname" list="IP_list" size="13"  />
					需要安装的服务：<input type="text" name="service" id="aemail" size="120" list="service_list"/>
                    <a href="#" class="clone">增加行</a>
                    <a href="#" class="delete">删除行</a>
                </div>
				<br/>
                    <input type="submit" class="submit" value="开始部署" /><br><br>
                提示：<br>
                mav，表示av的主实例，m是master的缩写<br>
                mvnc，表示vnc的主实例，m是master的缩写<br>
                mwhiteboard，表示whiteboard的主实例，m是master的缩写<br>
                sav，表示av的级联实例，s 是slave的缩写<br>
                svnc，表示vnc的级联实例，s 是slave的缩写<br>
                swhiteboard，表示whiteboard的级联实例，s 是slave的缩写<br><br>
            </form>
			<datalist id="IP_list">
			<option  value="192.168.7.105" />
			<option  value="192.168.7.106" />
			<option  value="192.168.7.107" />
			<option  value="192.168.7.108" />
			<option  value="192.168.7.109" />
		</datalist>
		<datalist id="service_list">
			<option  value="mav,1089;mvnc,1090;mwhiteboard,1091;sav,1092;svnc,1093;swhiteboard,1094;access,1095;manager,1096;ice_master,10000;ice_replica,10001" />
		</datalist>
        </div>
		<!--</form>-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js">
        </script>
        <script src="/static/jquery-cloneya.js"></script>
        <script>

            $('#animate-clone').cloneya()
                    .on('clone_before_clone', function(event, toclone) {
                        // do something
                    })
                    .on('clone_after_clone', function(event, toclone, newclone) {
                        // do something
                    })
                    .on('clone_before_append', function(event, toclone, newclone) {
                        $(newclone).css('display', 'none');
                        $(toclone).fadeOut('fast', function() {
                            $(this).fadeIn('fast');
                        });
                    })
                    .on('clone_after_append', function(event, toclone, newclone) {
                        $(newclone).slideToggle();
                    })
                    // we remove the original binding, the call to remove is also gone
                    .off('clone_before_delete')
                    // we add our own, so make sure to remove the element
                    .on('clone_before_delete', function(event, clone) {
                        $(clone).css('background-color', 'red');
                        $(clone).slideToggle('slow', function() {
                            $(this).remove();
                        });
                    })
                    .on('clone_after_delete', function(event) {
                        // do something;
                    });
        </script>

</body>
</html>